<template>

<div >
     <div style="margin:10px 20px 0 10px;">
         <el-upload :action="'http://'+ serverIp +':8081/file/upload'" :auto-upload="false" ref="upload" :on-success="success" :on-error="error">
         <el-button slot="trigger" type="primary" icon="el-icon-edit">文件选择</el-button>
         <el-button  @click="submit" style="margin-left:20px" type="success" size="small" icon="el-icon-share">文件上传</el-button>
         </el-upload>
     </div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="id" label="id" width="180" align="center"> </el-table-column>
    <el-table-column prop="name" label="文件名" width="180" align="center"> </el-table-column>
    <el-table-column prop="type" label="文件类型" align="center"> </el-table-column>
    <el-table-column prop="size" label="文件大小(k)" align="center"></el-table-column>
  </el-table>
  <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { serverIp } from '@/utils/config';

export default {
  data() {
    return {
      serverIp:serverIp,
      tableData: [],
      filename: "",
      pageSize: 8,
      pageNum: 1,
      total: null,
    };
  },
   methods:{
    load() {
      this.request
        .get("/file/page", {
          params: {
            username: this.username,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
      handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
    },
    submit(){
        this.$refs.upload.submit();
    },
    success(){
        this.$message.success("上传成功")
        this.load();
    },
    error(){
        this.$message.error("上传失败")
    }
  },
  created(){
      this.load();
  }
};
</script>
<style scoped>
.block{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>